<template>
  <div>
    <el-input v-model="param.firstValue" @input="onInput" :size="size" :disabled="disabled" type="number"  class="hide-spin-buttons" placeholder="请输入">
      <template #prepend>
        <!-- <el-tooltip class="item" effect="dark" :content="param.secondValue" placement="top"> -->
          <el-select v-model="param.secondValue" @change="onSelect" :disabled="disabled" :size="'small'" style="width:140px;" class="el-select-border">
            <el-option label="中国大陆 +86" value="86" />
            <el-option label="哈萨克斯坦 +7" value="7" />
            <el-option label="乌兹别克斯坦 +998" value="998"/>
            <el-option label="德国 +49" value="49" />
            <el-option label="俄罗斯 +7" value="7" />
            <el-option label="俄罗斯 +8" value="8" />
            <el-option label="白俄罗斯 +375" value="375" />
          </el-select>
        <!-- </el-tooltip> -->
      </template>
    </el-input>
  </div>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue';

const emit = defineEmits(['update:firstValue', 'update:secondValue', 'inputValTel','changeTag'])
const props = defineProps({
  firstValue: {
    type: String,
    default: ''
  },
  secondValue: {
    type: String,
    default: '86'
  },
  size: {
    type: String,
    default: 'medium'
  }
  ,
  disabled: {
    type: Boolean,
    default: false
  }
})

watch(() => props.firstValue, (val) => {
  param.value.firstValue = val
})

watch(() => props.secondValue, (val) => {
  param.value.secondValue = val
})

const param = ref({
  firstValue: props.firstValue,
  secondValue: props.secondValue
})

const onInput = (val) => {
  param.value.firstValue = val.replace(/[^\d]/g,'');
  emit('update:firstValue', val);
  emit('inputValTel', val);
  emit('changeTag', 1);
};
const onSelect = (val) => {
  emit('update:secondValue', val);
  emit('inputValTel',param.value.firstValue);
  emit('changeTag', 1);
};
defineExpose({
  onInput
})
</script>
<style lang="scss" scoped> 
:deep(.el-select__wrapper) {
    box-shadow: none !important;
    height: 30px;
    // border-radius: 0;
}
/* Vue 3 深度选择器 */
.hide-spin-buttons :deep(input::-webkit-outer-spin-button),
.hide-spin-buttons :deep(input::-webkit-inner-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}

.hide-spin-buttons :deep(input[type="number"]) {
  -moz-appearance: textfield; /* Firefox */
}
:deep(:el-select ){
  border: none;
}
</style>